<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            })
            var app2 = new Vue({
                el: '#app-2',
                data: {
                    message: '页面加载于 ' + new Date().toLocaleString()
                }
            })
            var app4 = new Vue({
                el: '#app-4',
                methods:{
                    add:function(){
                        var times=new Date();
                        this.peoples.push({name:this.username,age:this.age,time:new Date()})
                    },
                    removeAll:function(){
                        this.peoples=[]
                    },
                    reset:function(){
                        this.username='',this.age=''
                    },
                    /*deleteOne:function(index){
                        this.peoples.splice(index,1)
                    }*/
                },
                data: {
                    age:'',
                    username:'',
                    peoples: [
                        {name: 'zhh', age: 15,time:new Date()},
                        {name: 'zhh2', age: 25,time:new Date()}
                    ]
                },
                filters:{
                    hhmmss:function(val){
                        return (val.getHours()+':'+val.getMinutes()+':'+val.getSeconds())
                    },
                    capitalize: function (value) {
                        if (!value) return ''
                        value = value.toString()
                        return value.charAt(0).toUpperCase() + value.slice(1)
                    }
                }
            })
        }
    </script>
    <script type="text/css">
        td {
            text-align: center;
        }
    </script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<div id="app-4">
    <input v-model="username"><input v-model="age"><br>
    <button v-on:click="add">Add Person</button>
    <button v-on:click="removeAll">Remove All</button>
    <button v-on:click="reset">Reset</button>
    <table border="1px">
        <thead>
        <tr>
            <td>Num</td>
            <td width="100">Name</td>
            <td>Age</td>
            <td>Time</td>
            <td>Optional</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(todo,index) in peoples">
            <td>{{index+1}}</td>
            <td width="50" >{{ todo.name | capitalize }}</td>
            <td>{{ todo.age }}</td>
            <td>{{ todo.time|hhmmss }}</td><!--todo.time.getHours()+':'+todo.time.getMinutes()+':'+todo.time.getSeconds()-->
            <td width="50"><button v-on:click="peoples.splice(index, 1)">Delete</button></td><!--deleteOne(index)-->
        </tr>
        </tbody>
    </table>

</div>

</body>
</html>